<template>
  <div>
    <el-card class="cardBox">
      <el-table border style="width: 100%" row-key="funcId" :data="bankdatalist">
          <el-table-column prop="bankName" :label="$t('bankname')">
          </el-table-column>
          <el-table-column prop="bankCardNo" :label="$t('bankcardnum')">
          </el-table-column>
          <el-table-column prop="bindCardId" :label="$t('bindstate')">
          </el-table-column>
          <el-table-column prop="cardType" :label="$t('cardtype')">
          </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  getuserinfobankcardlist
} from '@/libs/reqlist.js'
export default {
  data () {
    return {
      userInfo: null,
      userId: null,
      bankdatalist: []
    }
  },
  methods: {
    getBankcardlist () {
      getuserinfobankcardlist({ userId: this.userId }).then(res => {
        if (res.data.code === '000000') {
          this.bankdatalist = res.data.data
        } else {
          this.$message.error(this.$t('sysexception'))
        }
      })
    }
  },
  mounted () {
      this.userInfo = JSON.parse(Cookies.get('userinfo'))
      this.userId = this.userInfo.userId
      this.getBankcardlist()
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.cardBox {
    width: 900px;
    margin-left: -60px;
}
@{deep} .el-table {
    font-size: 12px;

    .el-table__header-wrapper {
        background-color: #F2F2F2 !important;
    }
}
@{deep} .el-table td, .el-table th {
    height: 40px;
    padding: 0;
}
@{deep} .el-table th, .el-table tr {
    background-color: #F2F2F2 !important;
}
@{deep} .el-form-item__label {
    font-size: 12px;
}
</style>
